<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
    1
  </p>
  <p>
    2
  </p>
  <p>
    3
  </p>
  <p>
    4
  </p>
  <input id="input" />
  <script>
    // 
    
    // 防抖 debounce 等电梯
    // 降频函数
    // let timerId = null
    // function  debounceDoSomething () {
    //   // clearTimeout(定时器ID)
    //   // 取消上一次的定时器
    //   clearTimeout(timerId)

    //   // 开启新的定时器
    //   timerId = setTimeout(()=>{
    //     doSomething()
    //   },3*1000)
    //   //
    // }
    
    // 防抖函数（fn, 延时时间）  ===> 全新的函数
    // 闭包 + 高阶函数
    // 闭包: 在内层函数f中，用外层定义的变量:timerId, fn, t
    // 高阶函数: 如果一个函数f的参数或者返回值是函数，则称这个函数f是高阶函数
    function debounce(fn, t) {
      // 写你的代码
      let timerId = null
      function  f() {
        // clearTimeout(定时器ID)
        // 取消上一次的定时器
        clearTimeout(timerId)

        // 开启新的定时器
        timerId = setTimeout(()=>{
          fn()
        },t)
      }
      return f
    }

    function doSomething(){
      // getMilliseconds获取毫秒数
      console.log((new Date()).toLocaleTimeString(), (new Date()).getMilliseconds(),'假装发ajax', input.value)
    }
    const debounceDoSomething = debounce(doSomething, 3000)

    document.getElementById('input').addEventListener('input', () => {
      console.log('文本框内容变化')
      // doSomething()
      debounceDoSomething()
    }) 
    
    // window.addEventListener('scroll',() => {
    //   console.log('滚动条')
    //   doSomething()
    // })
    // window.addEventListener('resize',() => {
    //   console.log('窗口缩放')
    //   doSomething()
    // })
    // document.addEventListener('mousemove',() => {
    //   console.log('鼠标移动')
    //   doSomething()
    // })

    // const _doSomething = debounceBuilder(doSomething,1000)
    // document.getElementById('div').onmousemove = function () {

    // }



    // let timer = null
    // function debounce_doSomething () {
    //   clearTimeout(timer)
    //   timer = setTimeout(() => {
    //     doSomething()
    //   }, 1000)
    // }

    

    // let timer = null
    // function throttle() {
    //   if(timer) {
    //     return
    //   }
    //   timer = setTimeout(() => {
    //     doSomething()
    //     timer2 = null
    //   }, 1000)
    // }

  </script>
</body>
</html>